<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-03-11 13:48:51
 * @FilePath: \ztc-web\src\views\statement\chartBar.vue
-->
<template>
  <div v-loading="loading" class="content">
    <div id="chartBar" class="chart"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import { eventStatisticalAnalysis } from "@/api/statement/index";
import { debounce } from "@/utils";
const nameList = ref([]);
const countList = ref([]);
const loading = ref(false);
const formData = ref({});
const props = defineProps({
  form: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.form,
  (newValue) => {
    formData.value = newValue;
    handleChange();
  },
  { immediate: true, deep: true }
);
function handleChange() {
  nameList.value = [];
  countList.value = [];
  const arr1 = [];
  const arr2 = [];
  const arr3 = [];
  const arr4 = [];
  const arr5 = [];
  const arr6 = [];
  const arr7 = [];
  const arr8 = [];
  loading.value = true;
  eventStatisticalAnalysis({ ...formData.value })
    .then((res) => {
      res.data.list.forEach((item) => {
        nameList.value.push(item.deptName);
        arr1.push(item.localEvent.ypyCount);
        arr2.push(item.localEvent.wpyCount);
        arr3.push(item.outEvent.ypyCount);
        arr4.push(item.outEvent.wpyCount);
        arr5.push(item.inEvent.ypyCount);
        arr6.push(item.inEvent.wpyCount);
        arr7.push(item.allEvent.ypyCount);
        arr8.push(item.allEvent.wpyCount);
      });
      countList.value.push(arr7, arr8, arr1, arr2, arr3, arr4, arr5, arr6);
      loading.value = false;
      init();
    })
    .catch(() => {
      loading.value = false;
    });
}
function init() {
  let myChart = echarts.init(document.getElementById("chartBar"), null, {
    renderer: "svg",
  });
  const series = [
    "累计全部事件",
    "累计全部事件",
    "本区全部事件",
    "本区全部事件",
    "本区转出事件",
    "本区转出事件",
    "外区转入事件",
    "外区转入事件",
  ].map((name, sid) => {
    return {
      name: sid % 2 === 0 ? name + ":已研判" : name + ":待研判",
      type: "bar",
      stack: name,
      label: {
        show: true,
        color: "#fff",
        formatter: function (params) {
          return params.value === 0 ? "" : params.valu;
        },
      },
      data: countList.value[sid],
    };
  });
  myChart.setOption({
    // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //   { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
    // 	{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
    // ]),
    title: {
      text: "各区域累计事件",
      left: "2%",
      textStyle: {
        fontSize: 30,
        color: "#1275ca",
      },
    },
    grid: {
      left: "2%",
      right: "2%",
      top: "20%",
      bottom: "10%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      top: "10%",
      textStyle: {
        color: "#1275ca",
      },
      selectedMode: true,
    },
    yAxis: {
      type: "value",
      minInterval: 1,
      axisLabel: {
        formatter: "{value}",
        color: "#1275ca",
      },
      axisLine: {
        lineStyle: {
          color: "#27b4c2",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#11366e",
        },
      },
    },
    xAxis: {
      type: "category",
      data: nameList.value,
      minInterval: 1,
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: {
          color: "##1275ca",
          fontSize: 14,
        },
      },
      axisLine: {
        lineStyle: {
          color: "#397cbc",
        },
      },
      axisTick: {
        show: false,
      },
    },
    dataZoom: [
      {
        type: "inside",
        // type: 'slider',
        bottom: "5%",
        moveHandleSize: 5,
        // height:10,
        // maxSpan:50,
      },
    ],
    series,
  });
  const zoomSize = 6;
  const Chart = myChart;
  Chart.on("click", function (params) {
    Chart.dispatchAction({
      type: "dataZoom",
      startValue: nameList.value[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        nameList.value[
          Math.min(params.dataIndex + zoomSize / 2, nameList.value.length - 1)
        ],
    });
  });
  // 让图表自适应
  window.addEventListener("resize", () => {
    Chart.resize(); // myChart 是实例对象
  });
}

onBeforeUnmount(() => {});
</script>

<style lanf="scss" scoped>
.content {
  height: 600px;
  width: 100% !important;
}
.chart {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
</style>
